<template>

  <div :style="{height:height+30+'px',width:width}">
    <el-button v-if="!loading" type="success" icon="el-icon-download" size="mini" @click="getChartImage">导出报告</el-button>
    <div class="chart" ref="linechart" :style="{height:height+'px',width:width}"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: Number,
        default: window.innerHeight - 100, // 初始高度，可以根据需要调整
      },
      text: {
        type: String,
        default: ''
      },
      subtext: {
        type: String,
        default: ''
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val, oldValue) {
          this.setOptions(val)
        }
      },
      subtext: {
        deep: true,
        handler(val) {
          this.subtext = val;
        }
      },
      text: {
        deep: true,
        handler(val) {
          this.text = val;
        }
      }
    },
    data() {
      return {
        loading: false,
        chart: null,
        dataURL: '',
        mapping: {
          'ONE_DAY': '1天',
          'ONE_DAY_TO_ONE_WEEK': '1天-1星期',
          'ONE_WEEK_TO_ONE_MONTH': '1星期-1月',
          'ONE_MONTH_TO_SIX_MONTHS': '1月-6月',
          'SIX_MONTHS_TO_ONE_YEAR': '6月-1年',
          'ONE_YEAR_TO_TWO_YEARS': '1年-2年',
          'GREATER_THAN_TWO_YEARS': '>2年',
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {

      getChartImage() {
        this.loading = true;
        // 使用 toDataURL 方法将 canvas 内容转换为图片数据
        this.dataURL = this.chart.getDataURL({
          type: 'png',
            pixelRatio: 2, // 将像素比例设置为 2，即默认大小的两倍
        });
        this.$emit('handleSetSetChartImage', this.dataURL);
        this.loading = false;
        // 返回 base64 图片数据
      },
      // 定义一个排序规则
      // sortByDuration(a, b) {
      //   const durationMapping = {
      //     'ONE_DAY': 0,
      //     'ONE_DAY_TO_ONE_WEEK': 1,
      //     'ONE_WEEK_TO_ONE_MONTH': 2,
      //     'ONE_MONTH_TO_SIX_MONTHS': 3,
      //     'SIX_MONTHS_TO_ONE_YEAR': 4,
      //     'ONE_YEAR_TO_TWO_YEARS': 5,
      //     'GREATER_THAN_TWO_YEARS': 6
      //   };

      //   return durationMapping[a] - durationMapping[b];
      // },


      // 替换函数
      replaceValues(array, map) {
        let replaced = array.map(item => map[item] || item); // 如果map中没有对应的值，则保持原样
        return replaced;
      },
      initChart() {
        this.chart = echarts.init(this.$refs.linechart, 'macarons');
        this.setOptions(this.chartData);
      },
      setOptions(summaryData) {

        if (!this.chart) {
          console.error('Chart instance is not initialized.');
          return;
        }


        let xData = this.replaceValues(Object.keys(summaryData), this.mapping);
        this.chart.setOption({

          title: {
            text: this.text,
            subtext: this.subtext,
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',

            }
          },
          toolbox: {
            feature: {
              // dataView: {
              //   show: true,
              //   readOnly: false
              // },
              // magicType: {
              //   show: true,
              //   type: ['line', 'bar']
              // },
            }
          },
          // legend: {
          //   data: ['容量', '数量']
          // },
          xAxis: [{
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: '容量',
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '容量1',
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [{
              name: '容量',
              type: 'bar',
              label: {
                show: true,
                position: 'outside',

                formatter: '{b}: {c})' // 显示数值和百分比
              },
              tooltip: {
                valueFormatter: function(value) {
                  return value;
                }
              },
              data: Object.values(summaryData),
              // // 设置每根柱子的颜色
              // itemStyle: {
              //   color: function(params) {
              //     // 给定一个颜色数组
              //     const colors = ['#5793f3', '#d14a61', '#675bba', '#ffa022', '#2f4554', '#91c7ae', '#00aaff'];
              //     return colors[params.dataIndex];
              //   }
              // }
            },
            {
              name: '容量',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function(value) {
                  return value;
                }
              },
              data: Object.values(summaryData),
              // 设置每个点的颜色
              itemStyle: {
                color: '#ffa022'
              }
            }
          ]

        })


      }

    }
  }
</script>
